<template>
  <div>
    <div class="home w">
      <msgHint></msgHint>
      <div class="headline_box">
        <div class="headline_left">
          <div class="headline_left_title">
            <div class="no_wrap">网 站</div>
            <div class="no_wrap">头 条</div>
          </div>
        </div>
        <div class="headline_right">
          <div class="headline_right_title">
            防疫期间信阳市公共交通总公司开通定制公交服务
          </div>
          <div class="headline_right_cent">
            按照信阳市公共交通和道路运输服务中心《关于在疫情防控期间开展定制运输服务的通告》的要求，为保障我市复产复工复学通勤出行需求，同时降低交叉感染风险、阻断疫情传播...
          </div>
        </div>
      </div>
      <div class="dynamic_box">
        <div class="dynamic_list dynamic_list_active">
          <div class="nav_btn">
            <navBtn :title="'公交动态'"></navBtn>
          </div>
          <div
            class="nav_swp_box"
            v-loading="$store.state.loading"
          >
            <div>
              <mySwiper2
                :ifClick="true"
                :stateUrlList="newDynamicList"
              ></mySwiper2>
              <!-- <img
                class="nav_swp_img"
                src="../assets/imges/lb.png"
                alt=""
              > -->
            </div>
          </div>
        </div>
        <div
          class="dynamic_list"
          v-loading="$store.state.loading"
        >
          <div class="nav_btn">
            <navBtn
              :title="'公交新闻'"
              :toroter="'news'"
              :sortId="'11'"
              :navID="'2'"
            ></navBtn>
          </div>
          <div class="nav_news_box">
            <!-- <mySwiper3></mySwiper3> -->
            <div
              class="nav_news_list"
              v-for="item in newDynamicList"
              :key="item.id"
            >
              <div class="nav_news_id"></div>
              <div
                class="nav_news_item"
                @click="handDitails(item)"
              >
                {{item.title}}
              </div>
              <div
                v-show="item.sta==1"
                class="my_new"
              >[ 新 ]</div>
            </div>
          </div>
        </div>
      </div>
      <div class="search_box">
        <div>
          <div
            class="search_box_right pointer"
            @click="handDangJian()"
          >
            <div class="search_right_icon">
              <img
                class="search_box_right_hq"
                src="../assets/imges/hq.png"
                alt=""
              >
            </div>
            <span class="search_box_right_txt">企业党建</span>
          </div>
          <div
            class="search_box_right pointer"
            style="background:rgba(255,187,60,1);"
            @click="handYuanDi()"
          >
            <div class="search_right_icon">
              <img
                class="search_box_right_hq"
                src="../assets/imges/zcxx.png"
                alt=""
              >
            </div>
            <span class="search_box_right_txt">廉政园地</span>
          </div>
          <div
            class="search_box_right pointer"
            @click="handWind()"
            style="background:rgba(63,184,228,1);"
          >
            <div class="search_right_icon">
              <img
                class="search_box_right_hq"
                src="../assets/imges/ghzc.png"
                alt=""
              >
            </div>
            <span class="search_box_right_txt">公会之窗</span>
          </div>
          <div
            class="search_box_right pointer"
            @click="handSet()"
            style="background:rgba(138,222,186,1);"
          >
            <div class="search_right_icon">
              <img
                class="search_box_right_hq"
                src="../assets/imges/wm.png"
                alt=""
              >
            </div>
            <span class="search_box_right_txt">文明创建</span>
          </div>
        </div>
        <div>
          <div class="search_box_left">
            <div class="search_box_left_btn">
              <img
                class="msg_tz"
                src="../assets/imges/tz.png"
                alt=""
              >
              <span class="msg_left_title">路线名称查询</span>
            </div>
            <input
              placeholder="路径名称"
              type="text"
              class="search_box_left_inp"
              v-model="seachName"
            >
            <div
              @click="handSeach()"
              class="search_box_left_go"
            >
              立即查询
            </div>
          </div>
          <div class="search_box_left_news_box">
            <div class="search_box_left_news">
              <div
                :class="['msg_box']"
                v-loading="$store.state.loading"
              >
                <div class="msg_left">
                  <span class="msg_left_title">路线动态</span>
                </div>
                <div
                  class="msg_right"
                  @click="handNavState()"
                >
                  <span class="msg_right_title">更多</span>
                  <img
                    class="msg_right_tz"
                    src="../assets/imges/ytz.png"
                    alt=""
                  >
                </div>
              </div>
              <div class="search_box_left_news_list">
                <newsList :list='PathDynamicList'></newsList>
              </div>
            </div>
            <div class="search_box_left_ewm">
              <div class="ewm_btn">
                信阳公交下载专区
              </div>
              <div class="ewm_img_box_list">
                <div class="ewm_img_box">
                  <div>
                    <img
                      class="ewm_img"
                      src="../assets/imges/ewm.png"
                      alt=""
                    >
                  </div>
                  <div class="ewm_img_btn">
                    微信小程序
                  </div>
                </div>
                <div class="ewm_img_box">
                  <div>
                    <img
                      class="ewm_img"
                      src="../assets/imges/ewm.png"
                      alt=""
                    >
                  </div>
                  <div class="ewm_img_btn">
                    微信公众号
                  </div>
                </div>
              </div>
            </div>
          </div>

        </div>

      </div>
      <div
        class=""
        v-if="urlList.length!=0"
      >
        <navBtn
          :title="'公交风采'"
          :toroter="'news'"
          :sortId="'16'"
          :navID="'2'"
          :activeid="'5'"
          :urlListId="urlList[0].id"
        ></navBtn>
      </div>
      <div class="my_swiper_box">
        <mySwiper
          :ifClick="true"
          :heig="'270px'"
          :wid="'374px'"
          :urlList="mienList"
        ></mySwiper>
      </div>
      <div class="my_dis">
        <div class="my_media">
          <navBtn
            :title="'基层动态'"
            :toroter="'news'"
            :activeid="'7'"
            :navID="'2'"
            :sortId="'18'"
          ></navBtn>
          <newsList
            :list='jcList'
            :heights="heights"
          ></newsList>
        </div>
        <div class="media_focus_box">
          <navBtn
            :title="'媒体聚集'"
            :navID="'2'"
            :toroter="'news'"
            :activeid="'1'"
            :sortId="'12'"
          ></navBtn>
          <div class="focus_img_box">
            <img
              v-if="medioList.length!=0"
              @click="handMedia(medioList[0])"
              :src="medioList[0].img"
              class="focus_img pointer"
              alt=""
            >
          </div>
        </div>
      </div>
      <div class="just_box">
        <navBtn
          :sortId="'15'"
          :title="'公交正能量'"
          :ifborbottom="'1'"
          :toroter="'news'"
          :activeid="'4'"
          :navID="'2'"
        ></navBtn>
        <div class="my_swiper_box">
          <mySwiper
            :heig="'270px'"
            :wid="'374px'"
            :urlList="energyList"
            :ifClick='true'
          ></mySwiper>
        </div>
        <!-- <div class="just_box_img">
          <img
            class="just_img"
            src="../assets/imges/just1.png"
            alt=""
          >
          <img
            class="just_img"
            src="../assets/imges/just2.png"
            alt=""
          >
          <img
            class="just_img"
            src="../assets/imges/just3.png"
            alt=""
          >
        </div> -->
      </div>
      <div class="labor_box">
        <navBtn
          :title="'公会之窗'"
          :toroter="'window'"
          :sortId="'26'"
          :navID="'5'"
        ></navBtn>
        <div class="labor_cont">
          <div class="labor_left">
            <div
              class="nav_news_list"
              v-for="item in windowDynamicList"
              :key="item.id"
            >
              <div class="nav_news_id"></div>
              <div
                class="nav_news_item"
                @click="handDitails2(item)"
              >
                {{item.title}}
              </div>
              <div
                v-show="item.sta==1"
                class="my_new"
              >[ 新 ]</div>
            </div>
          </div>
          <div class="labor_right">
            <div class="labor_right_img">
              <span class="labor_right_title">
                工运动态
              </span>
              <img
                src="../assets/imges/gh1.png"
                alt=""
              >
            </div>
            <div class="labor_right_img">
              <span class="labor_right_title">
                先进风采
              </span>
              <img
                src="../assets/imges/gh2.png"
                alt=""
              >
            </div>
            <div class="labor_right_img">
              <span class="labor_right_title">
                职工之家
              </span>
              <img
                src="../assets/imges/zgzj.png"
                alt=""
              >
            </div>

          </div>
        </div>
      </div>

    </div>
  </div>

</template>

<script>
// @ is an alias to /src

import msgHint from "@/components/msgHint.vue";
import navBtn from "@/components/navBtn.vue";
import newsList from "@/components/newsList.vue";
import mySwiper from "@/components/mySwiper.vue";
import mySwiper2 from "@/components/mySwiper2.vue";
import mySwiper3 from "@/components/mySwiper3.vue";
// import apis from "@/api/api.js";
import axios from "axios";
export default {
  name: "home",
  components: {
    msgHint,
    navBtn,
    newsList,
    mySwiper,
    mySwiper2,
    mySwiper3
  },

  data() {
    return {
      newsList: [],
      PathDynamicList: [],
      heights: "332px",
      loading2: true,
      loading3: true,
      loading4: true,
      loading5: true,
      loading6: true,
      loading7: true,
      loading8: true,
      loading9: true,
      newDynamicList: [],
      windowDynamicList: [],
      jcList: [],
      mienList: [],
      urlList: [],
      stateUrlList: [],
      energyList: [],
      energyUrlList: [],
      seachName: "",
      medioList: []
    };
  },
  mounted() {
    //获取公交新闻
    this.getNewDynamicList();
    //获取路线动态
    this.getPathDynamicList();
    //获取工会之窗
    this.getWindowDynamicList();
    //获取集成动态
    this.getJcList();
    //公交风采
    this.getMienList();
    //公交动态
    this.getStateList();
    //公交正能量
    this.getEnergyList();
    //媒体聚焦
    this.getMedio();
  },
  methods: {
    handYuanDi() {
      this.$router.push({
        name: "news",
        query: { sortId: "11", id: 2, title: "公交新闻" }
      });
    },
    handSet() {
      this.$router.push({
        name: "news",
        query: { sortId: "13", id: 2, title: "文明创建" }
      });
    },
    handWind() {
      this.$router.push({
        name: "window",
        query: { sortId: "26", id: 5, title: "公运动态" }
      });
    },
    handDangJian() {
      this.$router.push({
        name: "party",
        query: { sortId: "22", id: 4, title: "工作动态" }
      });
    },
    handSeach() {
      this.$router.push({
        name: "paths",
        query: {
          sortId: "7",
          id: 7,
          title: "路线动态",
          seachName: this.seachName
        }
      });
    },
    handDitails2(item) {
      this.$router.push({
        name: "window",
        query: {
          sortId: item.sortId,
          id: "5",
          title: item.aName,
          detailsID: item.id,
          avt: 0
        }
      });
    },
    handMedia(item) {
      this.$router.push({
        name: "news",
        query: {
          sortId: item.sortId,
          id: "2",
          title: item.aName,
          detailsID: item.id,
          avt: 0
        }
      });
    },
    handDitails(item) {
      this.$router.push({
        name: "news",
        query: {
          sortId: item.sortId,
          id: "2",
          title: item.aName,
          detailsID: item.id,
          avt: 0
        }
      });
    },
    getMedio() {
      this.$api
        .getList({
          sortId: 12,
          page: 1,
          limit: 1
        })
        .then(res => {
          if (res.data.data.length != 0) {
            this.medioList = res.data.data;
            this.medioList.forEach(item => {
              item.img = this.$store.state.baseUrl + item.img;
              item.img = item.img.replace(/\\/g, "/");
            });
          }
        });
    },
    getEnergyList() {
      this.loading2 = true;
      this.$api
        .getList({
          sortId: 15,
          page: 1,
          limit: 4
        })
        .then(res => {
          this.energyList = res.data.data;
          this.energyList.forEach(item => {
            item.img = this.$store.state.baseUrl + item.img;
            item.img = item.img.replace(/\\/g, "/");
            // 374 270
            item.img.split(",").forEach(ele => {
              this.energyUrlList.push({
                url: ele
              });
            });
          });
          this.loading2 = false;
        });
    },
    getStateList() {
      this.$api
        .getList({
          sortId: 11,
          page: 1,
          limit: 4
        })
        .then(res => {
          this.stateList = res.data.data;
          this.stateList.forEach(item => {
            item.img = this.$store.state.baseUrl + item.img;
            item.img = item.img.replace(/\\/g, "/");
            // 374 270
            item.img.split(",").forEach(ele => {
              this.stateUrlList.push({
                url: ele,
                title: item.title
              });
            });
          });
        });
    },
    getMienList() {
      this.$api
        .getList({
          sortId: 16,
          page: 1,
          limit: 8
        })
        .then(res => {
          this.mienList = res.data.data;
          this.mienList.forEach(item => {
            item.img = this.$store.state.baseUrl + item.img;
            item.img = item.img.replace(/\\/g, "/");
            // 374 270
            item.img.split(",").forEach(ele => {
              this.urlList.push({
                url: ele,
                id: item.id
              });
            });
          });
        });
    },
    getJcList() {
      this.$api
        .getList({
          sortId: 18,
          page: 1,
          limit: 8
        })
        .then(res => {
          this.jcList = res.data.data;
          // this.sonList.forEach(item => {
          //   item.img = item.img.replace(/\\/g, "/");
          // });
        });
    },
    getWindowDynamicList() {
      this.$api
        .getList({
          sortId: 26,
          page: 1,
          limit: 8
        })
        .then(res => {
          this.windowDynamicList = res.data.data;

          // this.sonList.forEach(item => {
          //   item.img = item.img.replace(/\\/g, "/");
          // });
        });
    },
    getNewDynamicList() {
      this.loading3 = true;
      this.$api
        .getList({
          sortId: 11,
          page: 1,
          limit: 5
        })
        .then(res => {
          this.newDynamicList = res.data.data;
          // this.sonList.forEach(item => {
          //   item.img = item.img.replace(/\\/g, "/");
          // });
          this.loading3 = false;
        });
    },
    getPathDynamicList() {
      this.$api
        .getList({
          sortId: 17,
          page: 1,
          limit: 8
        })
        .then(res => {
          this.PathDynamicList = res.data.data;
          // this.sonList.forEach(item => {
          //   item.img = item.img.replace(/\\/g, "/");
          // });
        });
    },
    handNavState() {
      // this.$router.push({ path: "news", params: { rid: "5" } });
      this.$router.push({
        name: "news",
        query: { sortId: "17", id: 2, title: "路线动态" }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.footer {
  width: 100%;
  height: 319px;
  background: linear-gradient(
    180deg,
    rgba(36, 194, 247, 1) 0%,
    rgba(16, 118, 183, 1) 100%
  );
  margin-top: 40px;
  .footer_box {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .friendship_url {
      .url_title {
        color: #ffffff;
        font-size: 14px;
      }
      position: relative;
      .friend_title {
        position: absolute;
        color: #ffffff;
        font-size: 18px;
        position: absolute;
        top: -48px;
      }
    }
    .division {
      width: 4px;
      height: 92px;
      background: rgba(255, 255, 255, 1);
    }
  }
  .logo_img {
    width: 466px;
    height: 81px;
  }
}
.labor_box {
  margin-top: 10px;
  .labor_cont {
    display: flex;
    border: 1px solid rgba(204, 204, 204, 1);
    .labor_right {
      // margin-left: 72px;
      padding-top: 20px;
      padding-bottom: 20px;
      .labor_right_img {
        width: 574px;
        height: 104px;
        margin-bottom: 20px;
        position: relative;
        .labor_right_title {
          color: #090909;
          font-size: 40px;
          position: absolute;
          line-height: 104px;
          right: 110px;
        }
      }
      .labor_right_img:last-child {
        margin-bottom: 0;
      }
    }
    .labor_left {
      margin-top: 28px;
      padding-left: 21px;
      width: 533px;
      margin-right: 72px;
      .nav_news_list {
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        // margin-right: 72px;
        .nav_news_item {
          cursor: pointer;
          color: #333333;
          font-size: 16px;
          max-width: 484px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .my_new {
          color: #e6142f;
          font-size: 16px;
          margin-left: 26px;
          white-space: nowrap;
        }
        .nav_news_id {
          width: 8px;
          height: 8px;
          background: rgba(28, 137, 224, 1);
          border-radius: 50%;
          margin-right: 21px;
        }
      }
    }
  }
}
.just_box {
  margin-top: 10px;
  .just_box_img {
    height: 332px;
    background: rgba(237, 246, 255, 1);
    padding: 31px 23px;
    .just_img {
      margin-right: 16px;
    }
    .just_img:last-child {
      margin-right: 0;
    }
  }
}
.my_media {
  margin-right: 20px;
  width: 564px;
}
.focus_img_box {
  padding: 13px 21px;
  width: 616px;
  height: 332px;
  border: 1px solid rgba(204, 204, 204, 1);
  .focus_img {
    width: 574px;
    height: 306px;
  }
}
.my_dis {
  display: flex;
  align-items: center;
}
.my_swiper_box {
  position: relative;
  height: 332px;
  margin-bottom: 10px;
  border: 1px solid rgba(204, 204, 204, 1);
}
.search_box {
  input::-webkit-input-placeholder {
    /* WebKit browsers */
    color: #cccccc;
    padding-left: 12px;
  }
  // height: 92px;
  width: 100%;
  display: flex;
  .search_box_left_news_box {
    display: flex;
    .search_box_left_ewm {
      width: 396px;
      height: 326px;
      background: rgba(255, 255, 255, 1);
      border: 1px solid rgba(204, 204, 204, 1);
      margin-left: 19px;
      border-top: 0;
      .ewm_btn {
        width: 396px;
        height: 43px;
        background: linear-gradient(
          180deg,
          rgba(246, 84, 95, 1) 0%,
          rgba(255, 27, 0, 1) 100%
        );
        border-radius: 0px 0px 10px 10px;
        color: #fff;
        font-size: 22px;
        line-height: 43px;
        text-align: center;
      }
      .ewm_img_box_list {
        display: flex;
        padding-right: 23px;
        padding-left: 23px;
        margin-top: 36px;
        .ewm_img_box:first-child {
          margin-right: 17px;
        }
        .ewm_img_box {
          .ewm_img {
            width: 165px;
            height: 169px;
          }
          .ewm_img_btn {
            width: 168px;
            height: 38px;
            background: rgba(33, 184, 238, 1);
            color: #ffffff;
            font-size: 22px;
            line-height: 38px;
            text-align: center;
            margin-top: 12px;
          }
        }
      }
    }
  }
  .search_box_left_news {
    width: 473px;
    height: 326px;

    .search_box_left_news_list {
      height: 277px;
    }
  }
  .search_box_left {
    width: 888px;
    height: 92px;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    .search_box_left_btn {
      .msg_tz {
        // border: 1px dashed #ccc;
        width: 20px;
        height: 20px;
        margin-left: 5px;
        margin-right: 10px;
      }
      .msg_left_title {
        color: #ffffff;
        font-size: 20px;
      }
      align-items: center;
      display: flex;
      cursor: pointer;
      width: 181px;
      height: 49px;
      background: linear-gradient(
        180deg,
        rgba(36, 194, 247, 1) 0%,
        rgba(16, 118, 183, 1) 100%
      );
    }
    .search_box_left_go {
      cursor: pointer;
      width: 160px;
      height: 40px;
      background: rgba(230, 20, 47, 1);
      border-radius: 3px;
      line-height: 40px;
      text-align: center;
      color: #ffffff;
      font-size: 20px;
    }
    .search_box_left_inp {
      width: 516px;
      height: 46px;
      background: rgba(248, 248, 248, 1);
      margin: 0 17px;
    }
  }
  .search_box_right {
    height: 92px;
    width: 292px;
    background: rgba(255, 120, 120, 1);
    display: flex;
    align-items: center;
    margin-right: 20px;
    margin-bottom: 20px;
    .search_box_right_txt {
      color: #fffefe;
      font-size: 34px;
    }
    .search_right_icon {
      width: 63px;
      height: 63px;
      // border: 1px dashed #ccc;
      margin-left: 30px;
      margin-right: 21px;
      .search_box_right_hq {
        width: 100%;
        height: 100%;
      }
    }
  }
}
.dynamic_box {
  margin-top: 10px;
  display: flex;
  .nav_news_box {
    height: 365px;
    width: 100%;
    padding: 16px;
    border: 1px solid rgba(204, 204, 204, 1);
    background: rgba(248, 248, 248, 1);
    .nav_news_list {
      display: flex;
      align-items: center;
      margin-bottom: 20px;
      .nav_news_item {
        cursor: pointer;
        color: #333333;
        font-size: 16px;
        max-width: 455px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .my_new {
        color: #e6142f;
        font-size: 16px;
        margin-left: 26px;
      }
      .nav_news_id {
        width: 8px;
        height: 8px;
        background: rgba(28, 137, 224, 1);
        border-radius: 50%;
        margin-right: 4px;
      }
    }
  }
  .nav_swp_box {
    height: 365px;
    width: 100%;
    padding: 16px;
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(204, 204, 204, 1);
    .nav_swp_img {
      width: 100%;
      height: 100%;
    }
  }
  .dynamic_list {
    width: 50%;
    margin-bottom: 20px;
    .nav_btn {
      width: 100%;
    }
  }
  .dynamic_list_active {
    margin-right: 10px;
  }
}
.headline_box {
  display: flex;
  margin-top: 10px;
  .headline_right {
    width: 1096px;
    .headline_right_cent {
      font-size: 16px;
      width: 1045px;
      font-weight: 400;
      line-height: 21px;
      color: #333333;
      margin-left: 26px;
    }
    .headline_right_title {
      margin-top: 16px;
      margin-bottom: 26px;
      font-size: 28px;
      color: #e6142f;
      text-align: center;
    }
  }
  height: 140px;
  .headline_left {
    padding: 35px 22px;
    .headline_left_title {
      font-size: 26px;
      // line-height: 44px;
      color: rgba(255, 255, 255, 1);
      opacity: 1;
      .no_wrap {
        white-space: nowrap;
      }
    }
    width: 104px;
    height: 100%;
    background: rgba(0, 102, 188, 1);
  }
}
// .go_login ::v-deep .el-button.el-button--small {
//   width: 100px;
// }
.msg_box {
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(204, 204, 204, 1);
  border-bottom: 0;
  .msg_right {
    cursor: pointer;
    display: flex;
    align-items: center;
    height: 49px;
    .msg_right_title {
      color: #21b8ee;
      font-size: 16px;
    }
    .msg_right_tz {
      margin-right: 16px;
      margin-left: 6px;
    }
  }
  .msg_left {
    display: flex;
    align-items: center;
    width: 166px;
    width: 166px;
    height: 48px;
    .msg_tz {
      border: 1px dashed #ccc;
      width: 20px;
      height: 20px;
      margin-left: 5px;
      margin-right: 10px;
    }
    .msg_left_title {
      color: #e6142f;
      font-size: 20px;
      margin-left: 35px;

      // line-height: 49px;
    }
  }
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 49px;
}
</style>
